<template>
	<div class="app-container">
      <div class="bg-white">
			<el-form label-width="100px"  class="operation">
				<el-form-item label="表单位置：">
					 <el-select v-model="from2.Tree1" placeholder="请选择" @change="selectChang1">
                  <el-option
                   v-for="item in treeList"
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"
                  >
                  </el-option>
               </el-select>
               <el-select v-model="from2.Tree2" placeholder="请选择" @change="selectChang2"  v-show="selectTree2.length">
                  <el-option v-for="item in selectTree2" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"></el-option>
               </el-select>
               <el-select v-model="from2.Tree3" placeholder="请选择" @change="selectChang3"  v-show="selectTree3.length">
                  <el-option v-for="item in selectTree3" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"></el-option>
               </el-select>
               <el-select v-model="from2.Tree4" placeholder="请选择"  @change="selectChang4"  v-show="selectTree4.length">
                  <el-option v-for="item in selectTree4" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id" ></el-option>
               </el-select>
               <el-select v-model="from2.Tree5" placeholder="请选择"  @change="selectChang5"  v-show="selectTree5.length">
                  <el-option v-for="item in selectTree5" 
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"></el-option>
               </el-select>
					<el-autocomplete
						v-model="dirName"
						v-show="baseList.length>0"
						:fetch-suggestions="querySearchAsync"
						placeholder="请输入表名称"
						@select="handleSelect"
					></el-autocomplete>
				</el-form-item>
				<div>
				<el-form-item label="变更类型：" class="float-left">
					<el-select v-model="queryParams.logType" placeholder="请选择" class="search-select-descen float-left">
						<el-option class="select-more-option"
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						<div class="select-more-option-item">
							<span style="display:inline-block;padding-right:5px;"><i :class="item.icon"></i></span> 
							<span style="display:inline-block; color: #8492a6; font-size: 13px">{{ item.label }}</span> 
						</div>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="变更人：" class="float-left">
					<el-select v-model="queryParams.userId" placeholder="请选择" class="search-select-descen float-left">
						<el-option class="select-more-option"
						v-for="item in userList"
						:key="item.userId"
						:label="item.userName"
						:value="item.userId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="search-btn float-left" >
					<el-button
						type="primary"
						icon="el-icon-search"
						size="mini"
						class="search-btn-item"
						@click="searchBtn"
					>查询</el-button>
					<el-button
						type="primary"
						icon="el-icon-refresh"
						class="search-btn-item"
						size="mini"
					>刷新</el-button>
				</el-form-item>
				</div>
		</el-form>
		<el-table v-loading="loading" :data="UpDatalogList" @selection-change="handleSelectionChange" @row-click="handleRowClick" border>
			<el-table-column label="变更名称" align="center" key="userName" prop="tableAlias" min-width="199"  :show-overflow-tooltip="true" />
			<el-table-column label="变更名称（数据库）" align="center"  prop="tableName"  width="199" :show-overflow-tooltip="true" />
			<el-table-column label="对象所处分层" align="center" key="dirPath"  width="199" prop="dirPath" :show-overflow-tooltip="true" />
			<el-table-column label="变更类型" align="center" key="logTypeName"  min-width="199" prop="logTypeName" />
			<el-table-column label="变更数量" align="center" prop="updateCount"  min-width="199" />
			<el-table-column label="变更描述" align="center" prop="comment" min-width="199"/>
			<el-table-column label="变更内容" align="center" prop="content" min-width="199"/>
			<el-table-column label="变更时间" align="center" prop="createTime"  min-width="199" />
			<el-table-column label="变更人" align="center" prop="operator"  min-width="199"/>
		</el-table>
		 <pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getLogList"/>
      </div>
	</div>
</template>
<script>
import {getlogList,getDatabeseList} from '@/api/dataManagement/system/info';
import {mapTreeItem} from '@/api/dataManagement/system/dir'
import {listUser} from '@/api/dataManagement/system/user'
export default {
  name: "mapDetails",
  data(){
      return {
        // 遮罩层
        loading: false,
        // 用户表格数据
		  morehandleValue:'',
		  total:0,
		  UpDatalogList:[],
		   // 查询参数
         queryParams: {
            pageNum: 1,
            pageSize: 30,
            logType: undefined,
            userId: undefined,
				tableId:null
         },
			from2:{
            Tree1:'',
            Tree2:'',
            Tree3:'',
            Tree4:'',
            Tree5:'',
         },
			selectTree1:[],
         selectTree2:[],
         selectTree3:[],
         selectTree4:[],
         selectTree5:[],
			treeList:[],
			baseList:[],
			prefix:'',
			dirId:'',
		  // 用户表格数据
         userList: [],
			dirName:'',
		   options: [
				 {
				value: '10',
				label: '元数据变更-新增',
       	 }, 
			{
				value: '11',
				label: '元数据变更-更改',
			},{
				value: '12',
				label: '元数据变更-删除',
			}, {
				value: '20',
				label: '关联变更-新增',
			},
			{
				value: '21',
				label: '关联变更-更改',
			},
			{
				value: '22',
				label: '关联变更-删除',
			},
				{
				value: '30',
				label: '表单变更-新增',
			},
			{
				value: '31',
				label: '表单变更-新增',
			},
			{
				value: '32',
				label: '表单变更-删除',
			},
		   {
				value: '33',
				label: '表单变更-复制',
        	},
		    {
				value: '40',
				label: '数据变更-新增',
			},
				{
				value: '41',
				label: '数据变更-更改',
			},
				{
				value: '42',
				label: '数据变更-删除',
        	}
		  ],
      }
  },
	created(){
		this.getLogList();
		this.getUserList();
		this.getTreeList();
	},
	methods: {
		getLogList(){
			getlogList(this.queryParams).then(res=>{
				this.UpDatalogList = res.rows;
				this.total = res.total;
			})
		},
		getUserList(){
			listUser().then(res=>{
				this.userList = res.rows
			})
		},
		DatabeseList(){
			this.baseList = []
			this.dirName =''
			getDatabeseList({dirId:this.dirId}).then(res=>{
				var list = []
				if(res.rows.length>0) {
					for(var i=0;i<res.rows.length;i++){
					var obj = {}
					obj.value=res.rows[i].tableName
					obj.id=res.rows[i].id
					list.push(obj)
				}
				this.baseList = list
				}
			})
		},
		handleRowClick(){

		},
		handleSelectionChange(){

		},
		 selectChang1(value){
         // console.log(this.treeList)
         this.from2.Tree2= ''
         this.selectTree2 = [];
         this.selectTree3 = [];
         this.selectTree4 = [];
         this.selectTree5 = [];
         for(var i=0;i<this.treeList.length;i++){
            if(this.treeList[i].id == value){
               this.selectTree2 = this.treeList[i].children
            }
         }
         this.prefix = '';
      },
      selectChang2(value){
         // console.log(this.treeList)
         this.selectTree3 = [];
         this.selectTree4 = [];
         this.selectTree5 = [];
         for(var i=0;i<this.selectTree2.length;i++){
            if(this.selectTree2[i].children.length != 0 && this.selectTree2[i].id ==value) {
               this.selectTree3 = this.selectTree2[i].children
            }
            if(this.selectTree2[i].children.length == 0 && this.selectTree2[i].id ==value){
               this.prefix =this.selectTree2[i].prefix
               this.dirId = this.selectTree2[i].id
					this.DatabeseList()
            }
         }
      },
      selectChang3(value){
         this.selectTree4 = [];
         this.selectTree5 = [];
         for(var i=0;i<this.selectTree3.length;i++){
            if(this.selectTree3[i].children.length != 0 && this.selectTree3[i].id ==value) {
               this.selectTree4 = this.selectTree3[i].children
            }
            if(this.selectTree3[i].children.length == 0 && this.selectTree3[i].id ==value){
               this.prefix =this.selectTree3[i].prefix
               this.dirId = this.selectTree3[i].id
					this.DatabeseList();
            }
         }
      },
      selectChang4(value){
         this.selectTree5 = [];
         for(var i=0;i<this.selectTree4.length;i++){
            if(this.selectTree4[i].children.length != 0 && this.selectTree4[i].id ==value) {
               this.selectTree5 = this.selectTree4[i].children
            } 
            if(this.selectTree4[i].children.length == 0 && this.selectTree4[i].id ==value){
               this.prefix =this.selectTree4[i].prefix;
               this.dirId = this.selectTree4[i].id;
					this.DatabeseList();
            }
         }
      },
      selectChang5(value){
         for(var i=0;i<this.selectTree5.length;i++){
            if(this.selectTree5[i].children.length != 0 && this.selectTree5[i].id ==value) {
               this.selectTree6 = this.selectTree5[i].children
            } 
            if(this.selectTree5[i].children.length == 0 && this.selectTree5[i].id ==value){
               this.prefix =this.selectTree5[i].prefix;
               this.dirId = this.selectTree5[i].id;
					this.DatabeseList();
            }
         }
      },
		searchBtn(){
			getlogList(this.queryParams).then(res=>{
				this.UpDatalogList = res.rows;
				this.total = res.total;
			})
		},
      getTreeList(){
         mapTreeItem().then(res=>{
            this.treeList =res.data.children
         })
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.baseList;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
          cb(results);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
			this.queryParams.tableId = item.id
      }
	},
}
</script>

<style lang="scss" scoped>
/****
 reset element style
.

 */
 .el-col-3{
	 width:70px;
 }
 .el-col-2{
	 width:96px;
	 margin-right:10px;
 }
 /****
 reset element style
.

 */
 .app-container{
    padding-top:20px;
 }
 .search-item{
    overflow: hidden;
    display: inline-block;
    margin-right:10px;
 }
 .operation {
	 height:43px;
	 line-height: 43px;
    margin-bottom:20px;
	 .search-select-parent{
		 width:320px;
	 }
	 .search-select-child,.search-select-descen,.search-keyword{
		  width:160px;
	 }
    .search-item .search-select-descen{
      margin-left:6px;
    }
 }
</style>